<template>
  <view>
    <!-- <free-nav-bar title="游客端"></free-nav-bar> -->

    <scroll-view
      scroll-y
      scroll-with-animation
      style="height: calc(100vh - 50px)"
      :show-scrollbar="false"
    >
      <view class="fixed-title text-center pt-2 pb-2 font-14 text-white"
        >上游服务端</view
      >
      <view class="bg-linear-gradient" style="margin-top: 39px">
        <view class="p-2">
          <u-swiper height="300" :list="list"></u-swiper>
        </view>
      </view>
      <u-notice-bar
        style="border: 1px solid #8ed0f2; margin: 10px"
        color="#8ED0F2"
        bg-color="#fff"
        border-radius="10"
        :more-icon="true"
        class="pl-2 pr-2"
        mode="vertical"
        :is-circular="false"
        :list="lists"
        @click="gitMin('/pages/tabbar/index/NewList')"
      ></u-notice-bar>

      <view class="dfex pl-2 pr-2 mt-6 pb-4">
        <view
          style="text-align: center"
          v-for="(item, index) in CatList"
          :key="index"
          @click="open(item.url)"
        >
          <i
            v-if="item.icon"
            class="text-white bg-FFC251 p-2 font rounded-circle iconfont"
            v-html="item.icon"
          ></i>
          <view class="mt-4 font-14" style="lineHights">{{ item.name }}</view>
        </view>
      </view>
      <u-gap height="20" bg-color="#f7f7f7"></u-gap>
      <!-- 涉农申报列表 -->
      <view class="p-2">
        <view class="dfex">
          <view class="dfes">
            <text
              class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"
            ></text>
            <text class="pl-1 font-16 text-101010 font_family"
              >涉农主体列表</text
            >
          </view>
          <view @click="gitMin('/pages/tabbar/index/Agriculture')">
            <text class="font-14 text-999999">查看全部</text>
            <text class="iconfont icon-youyou- text-999999 font-16"></text>
          </view>
        </view>

        <view class="mt-5">
          <view
            class="dfex u-line pb-2 mb-2"
            v-for="(item, index) in nenoList"
            :key="index"
          >
            <view @click="gitMin('/pages/tabbar/index/AgricultureDetails')">
              <view class="text-333333 font-14">{{ item.title }}</view>
              <view class="dfes mt-2">
                <view class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded"
                  >芒果</view
                >
                <view class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded"
                  >澄迈</view
                >
                <view class="mr-2 bg-FCE07F text-FFC251 pl-1 pr-1 rounded"
                  >三亚</view
                >
              </view>
            </view>
            <view
              @click="click()"
              v-if="item.annt === '已通过，去查看'"
              class="bg-78AB06 pl-2 pr-2 py-1 rounded-circle font-12 text-white"
              >{{ item.annt }}</view
            >
            <view
              v-if="item.annt === '查看申请审核中'"
              class="bg-CECECE pl-2 pr-2 py-1 rounded-circle font-12 text-white"
              >{{ item.annt }}</view
            >
            <view
              v-if="item.annt === '申请查看主体信息'"
              class="bg-FFC251 pl-2 pr-2 py-1 rounded-circle font-12 text-white"
              >{{ item.annt }}</view
            >
          </view>
        </view>
      </view>

      <!-- 政策资讯 -->
      <u-gap height="20" bg-color="#f7f7f7"></u-gap>
      <view class="p-2">
        <view class="dfex">
          <view class="dfes">
            <text
              class="iconfont icon-a-huaban1fuben4 font-24 text-FFC251"
            ></text>
            <text class="pl-1 font-16 text-101010 font_family">政策资讯</text>
          </view>
          <view @click="gitMin('/pages/tabbar/index/policy')">
            <text class="font-14 text-999999">查看全部</text>
            <text class="iconfont icon-youyou- text-999999 font-16"></text>
          </view>
        </view>

        <view class="mt-5">
          <view
            class="dfex u-line pb-2 mb-2"
            v-for="(item, index) in newList"
            :key="index"
          >
            <view
              @click="gitMin('/pages/tabbar/index/policyDetails?id=' + item.id)"
            >
              <text class="text-333333 font-14">{{ item.title }}</text>
              <view class="mt-2 lineHights font-12 text-999999">
                <view>{{ item.source }}</view>
                <view>{{ item.createTime }}</view>
              </view>
            </view>
            <image
              style="width: 143px; height: 90px"
              :src="item.Image"
              mode=""
            ></image>
          </view>
        </view>
      </view>
      <!-- 列表  -->
      <u-gap height="20" bg-color="#f7f7f7"></u-gap>
      <view class="p-2">
        <!-- Tab bar -->
        <view class="dfex">
          <view
            class="tab-item pb-1"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="currentTab = index"
            :class="{ active: currentTab === index }"
          >
            {{ tab }}
          </view>
        </view>

        <!-- Tab content -->
        <view
          style="text-align: right"
          class="mt-2"
          v-if="tabs[currentTab] === '品牌积分榜'"
        >
          <text
            class="font-14 text-999999"
            @click="gitMin('/pages/tabbar/index/pointsTable')"
            >查看全部</text
          >
          <text class="iconfont icon-youyou- text-999999 font-16"></text>
        </view>
        <view
          style="text-align: right"
          class="mt-2"
          v-if="tabs[currentTab] === '黑名单'"
        >
          <text
            class="font-14 text-999999"
            @click="gitMin('/pages/tabbar/index/blacklist')"
            >查看全部</text
          >
          <text class="iconfont icon-youyou- text-999999 font-16"></text>
        </view>
        <view
          style="text-align: right"
          class="mt-2"
          v-if="tabs[currentTab] === '品牌执法'"
        >
          <text
            class="font-14 text-999999"
            @click="gitMin('/pages/tabbar/index/brandEnforcement')"
            >查看全部</text
          >
          <text class="iconfont icon-youyou- text-999999 font-16"></text>
        </view>
        <view class="mt-3">
          <view v-for="(item, itemIndex) in currentTabContent" :key="itemIndex">
            <!-- 标签页内容 -->
            <view class="dfex mt-3">
              <template v-if="tabs[currentTab] === '品牌积分榜'">
                <view class="dfes">
                  <!-- Customization for '品牌积分榜' tab -->
                  <view
                    :class="[
                      'pr-2 font-20',
                      {
                        'index-color-1': itemIndex % 3 === 0 && itemIndex < 3,
                        'index-color-2': itemIndex % 3 === 1 && itemIndex < 3,
                        'index-color-3': itemIndex % 3 === 2 && itemIndex < 3,
                        'font-color-gray': itemIndex >= 3,
                      },
                    ]"
                  >
                    {{ itemIndex + 1 }}
                  </view>
                  <image
                    style="width: 35px; height: 35px; border-radius: 100%"
                    :src="item.Image"
                  >
                  </image>
                  <text class="ml-2 font-14 text-333333">{{ item.name }}</text>
                </view>
                <text class="text-78AB06 font-16">{{ item.fouShu }} 积分</text>
              </template>
            </view>
            <!-- 黑名单, 品牌执法 -->
            <template
              v-if="
                tabs[currentTab] === '黑名单' || tabs[currentTab] === '品牌执法'
              "
            >
              <view class="u-line pb-2">
                <view class="dfex">
                  <view>{{ item.title }}</view>
                  <view>{{ item.time }}</view>
                </view>
                <view class="mt-2 text-999999 font-12">{{ item.content }}</view>
              </view>
            </template>
          </view>
        </view>
      </view>

      <free-confirm ref="confirm" title="提交申请">
        <u-form :model="form">
          <u-form-item
            :label-style="labelStyle"
            label-width="140"
            label="原因"
            prop="name"
          >
            <u-input class="mr-3" v-model="form.name" input-align="right" />
          </u-form-item>
        </u-form>
      </free-confirm>
    </scroll-view>
  </view>
</template>

<script>
import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
import freeConfirm from "@/components/free-ui/free-confirm.vue";
import $H from "@/common/free-lib/request.js";

export default {
  components: {
    freeNavBar,
    freeConfirm,
  },
  data() {
    return {
      form: {
        name: "",
        intro: "",
      },
      confirmType: "",
      confirmText: "",
      list: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
      lists: [],
      CatList: [
        {
          icon: "&#xe60b;",
          name: "品牌码查询",
          url: "/pages/tabbar/index/query",
          tabIndex: 0,
        },
        {
          icon: "&#xe60c;",
          name: "品牌执法",
          url: "/pages/tabbar/index/brandEnforcement",
          tabIndex: 1,
        },
        {
          icon: "&#xe61b;",
          name: "我的产品",
          url: "/pages/tabbar/market/index",
        },
        {
          icon: "&#xe608;",
          name: "我的服务码",
          url: "/pages/tabbar/user/BrandCode",
        },
      ],

      nenoList: [
        {
          title: "涉农申报业务标题",
          name: "报名中",
          kaisTiem: "2024.01.13 10:43:50",
          jshuTiem: "2024.01.14 10:43:50",
          annt: "已通过，去查看",
        },
        {
          title: "涉农申报业务标题1",
          name: "已结束",
          kaisTiem: "2024.01.13 10:43:50",
          jshuTiem: "2024.01.14 10:43:50",
          annt: "查看申请审核中",
        },
        {
          title: "涉农申报业务标题1",
          name: "已结束",
          kaisTiem: "2024.01.13 10:43:50",
          jshuTiem: "2024.01.14 10:43:50",
          annt: "申请查看主体信息",
        },
      ],
      newList: [],
      tabs: ["品牌积分榜", "黑名单", "品牌执法"],
      currentTab: 0,
      tabContents: [
        [
          {
            name: "内容1",
            Image: "/static/logo.png",
            fouShu: 100,
          },
          {
            name: "内容2",
            Image: "/static/logo.png",
            fouShu: 200,
          },
          {
            name: "内容2",
            Image: "/static/logo.png",
            fouShu: 200,
          },
          {
            name: "内容2",
            Image: "/static/logo.png",
            fouShu: 200,
          },
        ],
        [],
        [],
      ],
    };
  },
  onLoad() {
    this.getNoticeList();
    this.getPolicyReleaseList();
    this.getBlacklistList();
    this.getBrandEnforcementList();
  },
  computed: {
    currentTabContent() {
      return this.tabContents[this.currentTab];
    },
  },
  methods: {
    open(url) {
      // 判断url是否属于选项卡页面，如果包含 '/pages/tabbar/' 则认为是选项卡页面
      if (url.includes("/pages/tabbar/market/")) {
        uni.switchTab({
          url,
        });
      } else {
        uni.navigateTo({
          url,
        });
      }
    },

    gitMin(url) {
      uni.navigateTo({
        url,
      });
    },
    click() {
      this.$refs.confirm.show((close) => {
        if (this.confirmText === "") {
          uni.showToast({
            title: "不能为空",
            icon: "none",
          });
          return;
        }

        this.user[key] = this.confirmText;
        uni.showToast({
          title: "修改成功",
          icon: "none",
        });
        close();
      });
    },

    getNoticeList() {
      $H.get(
        "/basisInform/platformNotice/upper/list",
        {
          pageNo: 1,
          pageSize: 10,
        },
        {}
      )
        .then((res) => {
          const noticeList = [];
          for (let i = 0; i < res.result.records.length; i++) {
            if (res.result.records[i].title) {
              noticeList.push(res.result.records[i].title);
            }
          }
          this.lists = noticeList;
        })
        .catch((error) => {
          console.error("请求出错", error); // 处理任何错误
        });
    },
    getPolicyReleaseList() {
      $H.get(
        "/basisInform/policyRelease/upper/list",
        {
          pageNo: 1,
          pageSize: 10,
        },
        {}
      )
        .then((res) => {
			if (res.result.records.length == 0) {
            return;
          }
          let resList = [];
          for (let i = 0; i < res.result.records.length; i++) {
            const item = res.result.records[i];
            resList.push({
              title: item.title,
              source: item.source,
              createTime: item.createTime,
              Image: item.cover,
              id: item.id,
            });
          }
          this.newList = resList;
        })
        .catch((error) => {
          console.error("请求出错", error); // 处理任何错误
        });
    },
    getBlacklistList() {
      $H.get(
        "/agriculture/blacklist/upper/list",
        {
          pageNo: 1,
          pageSize: 10,
        },
        {}
      )
        .then((res) => {
          if (res.result.records.length == 0) {
            return;
          }
          let resList = [];
          for (let i = 0; i < res.result.records.length; i++) {
            const item = res.result.records[i];
            resList.push({
              title: item.enterpriseName,
              content: item.enterprisesReason,
              time: item.updateTime,
            });
          }
          this.tabContents[1] = resList;
        })
        .catch((error) => {
          console.error("请求出错", error); // 处理任何错误
        });
    },
    getBrandEnforcementList() {
      $H.get(
        "/agriculture/brandEnforcement/upper/list",
        {
          pageNo: 1,
          pageSize: 10,
        },
        {}
      )
        .then((res) => {
          if (res.result.records.length == 0) {
            return;
          }
          let resList = [];
          for (let i = 0; i < res.result.records.length; i++) {
            const item = res.result.records[i];
            resList.push({
              title: item.enterpriseName,
              content: item.enforcementInstructions,
              time: item.createTime,
            });
          }
          this.tabContents[2] = resList;
        })
        .catch((error) => {
          console.error("请求出错", error); // 处理任何错误
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-item {
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.tab-item.active {
  font-size: 16px;
  color: #ffc251;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #ffc251;
}

.index-color-1 {
  font-size: 22px;
  color: #ff0000;
}

.index-color-2 {
  font-size: 22px;
  color: #17a2b8;
}

.index-color-3 {
  font-size: 22px;
  color: #ffc251;
}
</style>